<template>
  <div>
    <h1>会员列表</h1>
    <hr />
    <div>
      会员编号: <input type="text" /> 会员名称: <input type="text" />
      会员等级:
      <select>
        <option value=""></option>
      </select>
      <input type="button" value="查询" @click="Getlist" />
    </div>
    <tbody>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td>Id</td>
            <td>姓名</td>
            <td>手机号</td>
            <td>身份号</td>
            <td>生日</td>
            <td>性别</td>
            <td>状态</td>
            <td>余额</td>
            <td>积分</td>
            <td>创建时间</td>
            <td>修改时间</td>
            <td>逻辑删除</td>
            <td>等级id</td>
            <td>操作</td>
          </tr>
          <tr v-for="item in UserList" :key="item.Id">
            <td>{{ item.Id }}</td>
            <td>{{ item.Name }}</td>
            <td>{{ item.Phone }}</td>
            <td>{{ item.Card }}</td>
            <td>{{ item.Birthday }}</td>
            <td>{{ item.Sex }}</td>
            <td>{{ item.State }}</td>
            <td>{{ item.Money }}</td>
            <td>{{ item.Points }}</td>
            <td>{{ item.Creatdate }}</td>
            <td>{{ item.Update }}</td>
            <td>{{ item.IsDeleted }}</td>
            <td>
              <span v-if="item.LId == 3">黄金会员</span>
              <span v-if="item.LId == 4">合金会员</span>
            </td>
            <td>
              <input type="button" value="删除" @click="Del(item.Id)" />
              <input type="button" value="修改" @click="Update(item.Id)" />
            </td>
          </tr>
        </tbody>
      </table>
    </tbody>
  </div>
</template>
<script setup lang="ts">
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const Route = useRoute();

//跳转到修改
const Update = (id: any) => {
  router.push({
    path: "/memberUpdate",
    query: {
      id: id,
    },
  });
};

//删除操作
const Del = (id: any) => {
  //1.删除友好提示
  if (confirm("是否删除")) {
    //2.发送网络请求作删除操作
    axios({
      url: "https://localhost:7142/api/Member/LDelet",
      method: "delete",
      params: {
        id: id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data == 1) {
          alert("删除成功");
          //调用会员列表List
          Getlist();
        }
      })
      .catch((arr) => {
        console.log(arr);
        alert("删除失败");
      });
    //3.
  }
};

//就绪
onMounted(() => {
  Getlist();
});

//传过去的数据
let cdata = reactive({ id: "", name: "", levelId: "" });

//传过来的数据
let UserList: any = ref({});
console.log(UserList);

//获取列表数据
const Getlist = () => {
  axios({
    url: "/api/Member/Memebrlist",
    method: "GET",
    params: cdata,
  })
    .then((res) => {
      console.log(res);
      UserList.value = res.data;
    })
    .catch((arr) => {});
};
</script>

<style scoped></style>
